<template>
  <div class="DiFangZhiList">
    <div class="DiFangZhiListHeader">
      <div class="DiFangZhiListTop">
        <div>
          <img src="../assets/Img/1.png" alt>
        </div>
        <div>
          <div>地方志</div>
          <div>地方年鉴</div>
          <div>统计年鉴</div>
        </div>
        <div>登录 | 注册</div>
      </div>
      <div class="DiFangZhiListBottom">
        <Sousuo class="Center"></Sousuo>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
    <Foot></Foot>
  </div>
</template>
<script>
import Sousuo from "../components/Sousuo";
import Foot from "../components/Foot";
export default {
  name: "home",

  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    Sousuo: Sousuo,
    Foot: Foot
  }
};
</script>
<style scoped>
.DiFangZhiListHeader {
  color: rgba(255, 255, 255, 1);
  height: 286px;
  background: url("../assets/Img/10.jpg");
  background-size: 100% 100%;
  background-position: center 0;
  background-size: cover;
}
.DiFangZhiListTop {
  display: flex;
  justify-content: center;
  padding-top: 55px;
}
.DiFangZhiListTop > div:nth-child(1) {
  margin-right: 216px;
}
.DiFangZhiListTop > div:nth-child(2) {
  display: flex;
  justify-content: center;
  margin-right: 122px;
}
.DiFangZhiListTop > div:nth-child(2) > div {
  margin: 0 36px;
  padding-bottom: 17px;
  border-bottom: 3px solid #37a3ff;
}
.DiFangZhiListTop > div:nth-child(3) {
  display: flex;
  justify-content: center;
  font-size: 16px;
}
.DiFangZhiListBottom {
  margin-top: 50px;
}
.DiFangZhiListBottom > .Center {
  margin: 0 auto;
}
</style>
